<template>
  <div class="centent">
    <div class="cnetext-top1">
      <span class="iconfont icon-fork" @click="fun()"></span>
    </div>
    <div class="centent01">
      <span> 登录后继续操作 </span>
     <div class="input">
          <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
       
        <div class="button">
           <el-button :plain="true" style="width:90%;background: black;
color: white;">
          <van-button round block type="info" native-type="submit" @click="id()"
            >登录</van-button >
           </el-button>
        </div>
      
        <div class="button01">
           <el-button :plain="true" style="width:90%">
          <van-button round block type="info" native-type="submit" @click="register()"
            >注册</van-button
          >
          </el-button>
        </div>
      </van-form>
      
     </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Form } from "vant";
import { Field } from "vant";
import "vant/lib/index.css";
import { Toast } from 'vant';

Vue.use(Toast);
Vue.use(Form);
Vue.use(Field);
export default {
  created() {
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
    }
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });
      this.$store.dispatch("idment",{url:"/idment"})
         

         
  },
  computed:{
   arrid(){
     console.log("arrid",this.$store.state.idment.arr.id);
      return this.$store.state.idment.arr.id;
    }
  },
  data() {
    return {
      username: "",
      password: "",
      username1:"",
      password1: "",
    };
  },
  methods: {
    register(){
      this.$router.push("./register")
          },
    onSubmit(values) {
      console.log("submit", values);
    },
    fun(){
        this.$router.push("/Purchase")
    },
    id(){
       this.username1 = this.$store.state.idment.arr.id
       this.password1 = this.$store.state.idment.arr.password
      if(this.username1 == this.username && this.password1 == this.password){
localStorage.setItem('id',this.username1);
localStorage.setItem('password',this.password1);
this.$router.go(-1)
        this.$message({
          message: '登陆成功',
          type: 'success'
        });

      }else{
         this.$message.error('账号或密码有误，请重新登录');
      }
      }

  },
};
</script>

<style scoped>
.button{
margin: .16rem;
height: .45rem;
text-align: center;

}
.button01{
margin: .16rem;
height: .4rem;
text-align: center;

}
.input{
    margin-top: .4rem;
    
}
.centent {
  width: 100%;
  height: 100%;
 
}
.cnetext-top1 {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin: auto;
  margin-top: 0.4rem;
}
.centent01 {
  width: 90%;
  margin: auto;
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
}

.centent01 span {
  font-size: 0.2rem;
  text-align: center;
}
</style>